﻿@page "/heatmap-chart/opposed-axis"

@using Syncfusion.Blazor.HeatMap
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@using Syncfusion.Blazor.Buttons;
@using sf_blazor_heatmapdata
@using MSComponents = Microsoft.AspNetCore.Components
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the monthly flight arrivals at JFK international airport, New York. The data label is disabled in this sample, the Tooltip displays the data point values.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to change the display position of the axis. You can change the display position of axes by enabling the <code>OpposedPosition</code> property for each axis. </p>
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="row">
        <SfHeatMap DataSource="@DataSource">
            <HeatMapTitleSettings Text="Monthly Flight Traffic at JFK Airport">
                <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
            </HeatMapTitleSettings>
            <HeatMapXAxis Labels="@XLabels"
                          LabelRotation="45"
                          LabelIntersectAction="@SFHeatMap.LabelIntersectAction.None"
                          OpposedPosition="@XOpposedPosition">
            </HeatMapXAxis>
            <HeatMapYAxis Labels="@YLabels" OpposedPosition="@YOpposedPosition"></HeatMapYAxis>
            <HeatMapCellSettings ShowLabel="false" Format="{value} flights">
                <HeatMapCellBorder Width="0"></HeatMapCellBorder>
            </HeatMapCellSettings>
            <HeatMapLegendSettings Visible="false"></HeatMapLegendSettings>
        </SfHeatMap>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div><h5>Properties</h5></div>
    <table id="property" title="Properties" style="width: 100%">
        <tbody>
            <tr style="height: 50px">
                <td style="width: 40%;">
                    <div>
                        <SfCheckBox Label="Change X-Axis Position" ValueChange="ValueXChange" TChecked="bool"></SfCheckBox>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 40%;">
                    <div>
                        <SfCheckBox Label="Change Y-Axis Position" ValueChange="ValueYChange" TChecked="bool"></SfCheckBox>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@code{
    public bool YOpposedPosition = false;
    public bool XOpposedPosition = false;
    string[] XLabels = new string[] { "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017" };
    string[] YLabels = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec" };
    int[,] DataSource = HeatMapData.GetOpposedData();
    public void ValueXChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        XOpposedPosition = args.Checked;
    }
    public void ValueYChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        YOpposedPosition = args.Checked;
    }
}

